<html>
<head>
<meta name='layout' content='template' />
<script type="text/javascript" src="${resource(dir: 'js/', file: 'jquery.blockUI.js')}"></script>
<title>Login</title>
<style type="text/css">
#login {
		margin: 15px auto;
		padding: 0px;
		text-align: center;
		
	}

	#login .inner {
		width: 400px;
		padding-bottom: 6px;
		margin: 60px auto;
		text-align: left;
		border: 1px solid #aab;
		background-color: #f0f0fa;
		-moz-box-shadow: 2px 2px 2px #eee;
		-webkit-box-shadow: 2px 2px 2px #eee;
		-khtml-box-shadow: 2px 2px 2px #eee;
		box-shadow: 2px 2px 2px #eee;
	}

	#login .inner .fheader {
		padding: 18px 26px 14px 26px;
		background-color: #f7f7ff;
		margin: 0px 0 14px 0;
		color: #2e3741;
		font-size: 18px;
		font-weight: bold;
	}
	
	#login .txtinput { 
		display: block;
		font-family: "Helvetica Neue", Arial, sans-serif;
		border-style: solid;
		border-width: 1px;
		border-color: #dedede;
		margin-bottom: 20px;
		margin-left: 10px;
		font-size: 1.1em;
		padding: 11px 20px;
		padding-left: 55px;
		width: 77%;
		color: #777;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
		-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
		-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; 
		transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
		-webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
		-moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
		-o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
		}
		#login .txtinput:focus { 
		color: #333;
		border-color: rgba(41, 92, 161, 0.4);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
		-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
		-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
		outline: 0 none; 
		}
		
		#login input#username {
			background: #fff url("${resource(dir: 'images/', file: 'email.png', absolute : true)}") 4px 5px no-repeat;
		} 
		
		#login input#password {
			background: #fff url("${resource(dir: 'images/', file: 'password.png', absolute : true)}") 4px 5px no-repeat;
		} 
		
		#login input#yourname {
			background: #fff url("${resource(dir: 'images/', file: 'text-editor.png', absolute : true)}") 4px 5px no-repeat;
		} 
		#login .checkbox{
			margin-left: 15px
		}
		
		#submitLogin{
		margin-left: 120px;
		margin-top: 15px
		}
		
		#autoLogin{
			margin-top: 15px
		}
		
		#loadSpinnerImage{
		position:absolute;
		top: 10px;
		left: 370px;
		}
		#loadLogin{
		position:absolute;
		top: 10px;
		left: 170px;
		}
		#parentSpinner{
			position:relative;
		}
		
</style>
</head>
<body>
<div id="showBlock" class="container" style="width: 550px; height: 430px">
	<div id="login" >
		
		<div class="inner">
		<div class='fheader'><g:message code="springSecurity.login.header"/></div>
		<form style="align: left" class="form-horizontal"
			action="${resource(file: 'j_spring_security_check')}" method='POST'
			id='loginForm' class='cssform' autocomplete='off'>
			<div id="occurError">
				<g:if test='${flash.message}'>
					<div class='alert alert-error'>
						${flash.message}
					</div>
				</g:if>
			</div>	
					<div id="foo"></div>
					<div id="parentSpinner">
					<input class="txtinput" id="username" type="email" name='j_username' placeholder="Your email address" />
					<span id="loadSpinnerImage"></span>
					<span id="loadLogin"></span>
					</div>
					<div id="passwordfield" style="position: relative">
					<input class="txtinput" type='password' class='text_' name='j_password'
						id='password' placeholder="Password" />
					<a id="forgetPassword" href="#" style="position:absolute; left: 280px; top:12px">Forgot Password</a>
					</div>
					<input class="txtinput" type='text' id='yourname' placeholder="Your name" />
					
					<label class="checkbox"> <input type='checkbox' name='_spring_security_remember_me' id='remember_me'
						<g:if test='${hasCookie}'>checked='checked'</g:if> /> Remember me </label> 
					
					<g:submitButton name="submitLogin" id="submitLogin" class="btn btn-info" value="Login" />
					<a id="autoLogin" class="btn btn-info" href="${createLink(controller : 'login', action : 'autoLogin')}">Auto Login</a>
					
					<div id="showMessage" style="margin: 10px 0"></div>
					
		</form>
		</div>
	</div>

</div>
	<script type='text/javascript'>
	<!--
	jQuery(document).ready(function($){
		$('#password').hide();
		$('#yourname').hide();
		$('#forgetPassword').hide();
		$(':input[type="submit"]').attr('disabled','disabled');
		$(':input[type="submit"]').css("cursor","not-allowed");
		
	   var func = function() {
		   		var htmlPrepareImage = '<img src="${resource(dir : "images/", file: "spinner.gif", absolute : true)}"/>'
			    $("#loadSpinnerImage").fadeIn(100,0);
				$("#loadSpinnerImage").html(htmlPrepareImage);
				$("#loadSpinnerImage").fadeOut(2500);
			
			var username = $('#username').val();
			$.ajax({
				url: '${g.createLink(controller: 'login', action: 'checkExistAccount')}',
				dataType: 'json',
				type: 'GET',
				contentType: "application/json",
				data: {
					username: username
				},
				beforeSend: function(){
					$('#yourname').hide();
					$('#password').hide();
					$('#loadLogin').empty();
					$("#occurError").empty();
					$('#forgetPassword').hide();
					$('#showMessage').empty();
					
				},
				success: function(data){
					if(data.member == 1){
						$('#password').show();
						$('#password').focus();
						$('#forgetPassword').show();
						$('input[type="submit"]').removeAttr('disabled');
						$('input[type="submit"]').css("cursor","default");
					}
					else if(data.member == 2){
						$('#yourname').show();
						$('#yourname').focus();
						$('input[type="submit"]').removeAttr('disabled');
						$('input[type="submit"]').css("cursor","default");
					}
					else{
						var html = '<img style="position:absolute; width:20px; height: 20px; left: 170px" src="${resource(dir : "images/", file: "tick_16.png", absolute : true)}"/>'
						$('#loadLogin').html(html);
						$('input[type="submit"]').removeAttr('disabled');
						$('input[type="submit"]').css("cursor","default");
					}
				}
			});
			
		}

		var timeoutReference;
		$('#username').keyup(function() {
			$(':input[type="submit"]').attr('disabled','disabled');
			$(':input[type="submit"]').css("cursor","not-allowed");
			var regName= /^[\w-]+(?:\.[\w-]+)*@(?:[\w-]+\.)+[a-zA-Z]{2,7}$/;
			var username = $('#username').val();
			if(regName.test(username)){
				if (timeoutReference) clearTimeout(timeoutReference);
					timeoutReference = setTimeout(func,1200);
			}
		});
		var opts = {
				  lines: 13, // The number of lines to draw
				  length: 13, // The length of each line
				  width: 3, // The line thickness
				  radius: 15, // The radius of the inner circle
				  corners: 1, // Corner roundness (0..1)
				  rotate: 0, // The rotation offset
				  direction: 1, // 1: clockwise, -1: counterclockwise
				  color: '#000', // #rgb or #rrggbb
				  speed: 1, // Rounds per second
				  trail: 60, // Afterglow percentage
				  shadow: false, // Whether to render a shadow
				  hwaccel: false, // Whether to use hardware acceleration
				  className: 'spinner', // The CSS class to assign to the spinner
				  zIndex: 2e9, // The z-index (defaults to 2000000000)
				  top: '110px', // Top position relative to parent in px
				  left: 'auto' // Left position relative to parent in px
				};
			var target = document.getElementById('foo');
			var spinner = new Spinner(opts)
		$('#submitLogin').click(function(){
			var yourname = $('#yourname').val();
			$('#loginForm').validate({
				rules: {
					j_username: {
						required: true,
						remote: {
							url: '${g.createLink(controller: 'login', action: 'sendMail')}',
							dataType: 'json',
							data: {
								yourname: yourname
							},
							beforeSend: function(){
								$('div#showBlock').block({
									message:'Please wait...',
									
								});
								spinner.spin(target);
							},
							complete: function(completeXml, completeStatus){
								$('div#showBlock').unblock();
								spinner.stop(target);
							},
							error: function(errorXml, errorStatus, errorError){
								$('div#showBlock').unblock();
								spinner.stop(target);
							},
							
						}
					}
				},
				submitHandler: function(form)
	             {
	                form.submit();
	             }
			});
				
		});

		$('#forgetPassword').click(function(){
			var username = $('#username').val();
			$.ajax({
				url: '${g.createLink(controller: 'login', action: 'sendMailForgetPassword')}',
				dataType: 'json',
				data: {
					username: username
				},
				beforeSend: function(){
					$('div#showBlock').block({
						message:'Please wait...',
						
					});
					spinner.spin(target);
				},
				complete: function(completeXml, completeStatus){
					$('div#showBlock').unblock();
					spinner.stop(target);
					var updatestr = "<div class='alert alert-success'>An email will be sent to you. Please follow the instructions to reset your password.</div>";
					$('#showMessage').html(updatestr);
				},
				error: function(errorXml, errorStatus, errorError){
					$('div#showBlock').unblock();
					spinner.stop(target);
					var updatestr = "<div class='alert alert-error'>Connection not established</div>";
					$('#showMessage').html(updatestr);
				},
			
			});
		});
	
		
});
	
	// -->
</script>
</body>
</html>
